.layout-navigation {
  position: absolute;
  opacity: 0;
  z-index: 999;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #fff;
  transform: translateY(-100%);
  box-shadow: 0px 5px 60px 0px rgba(17, 58, 93, 0.25);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.3s cubic-bezier(0.9, 0, 0.3, 0.7);
  transition: -webkit-transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.3s cubic-bezier(0.9, 0, 0.3, 0.7);
  transition: transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.3s cubic-bezier(0.9, 0, 0.3, 0.7);
  transition: transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), -webkit-transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.3s cubic-bezier(0.9, 0, 0.3, 0.7);

  &.open {
    opacity: 1;
    top: 84px;
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.3s cubic-bezier(0.9, 0, 0.3, 0.7);
    transition: -webkit-transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.3s cubic-bezier(0.9, 0, 0.3, 0.7);
    transition: transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.3s cubic-bezier(0.9, 0, 0.3, 0.7);
    transition: transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), -webkit-transform 0.3s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.3s cubic-bezier(0.9, 0, 0.3, 0.7);
  }

  .navigation-main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    ul {
      position: relative;
      overflow: hidden;
      padding: 12px;
      margin: 24px 0;

      li {
        line-height: 1.5rem;
        text-align: center;
        padding: 24px 0;

        &:not(:last-child) {
          border-bottom: 1px solid @main-color;
        }
      }
    }

  }



}